<template>
  <div class="Mine">
    <x-header :left-options="{showBack: false}">{{this.$route.name}}</x-header>
    <div class="content">
      <div class="min-user">
        <div class="aver">
          <img src="../assets/logo.png" alt="">
        </div>
      </div>
      <group>
        <cell title="我的订单" value="查看全部订单" :is-link="true"></cell>
        <cell-box>
          <ul class="min-nav">
            <li>
              <img src="../assets/icon/Ecommerce-03.png" alt="">
              <span>待支付</span>
            </li>
            <li>
              <img src="../assets/icon/Ecommerce-42.png" alt="">
              <span>待发货</span>
            </li>
            <li>
              <img src="../assets/icon/Ecommerce-40.png" alt="">
              <span>待收货</span>
            </li>
            <li>
              <img src="../assets/icon/Ecommerce-14.png" alt="">
              <span>交易完成</span>
            </li>
          </ul>
        </cell-box>
      </group>
      <group>
        <cell title="我的优惠券" is-link>
          <img slot="icon" width="20" style="display:block;margin-right:5px;" src="../assets/icon/Ecommerce-12.png" alt="">
        </cell>
        <cell title="地址管理" is-link>
          <img slot="icon" width="20" style="display:block;margin-right:5px;" src="../assets/icon/Ecommerce-45.png" alt="">
        </cell>
        <cell title="联系客服" is-link>
          <img slot="icon" width="20" style="display:block;margin-right:5px;" src="../assets/icon/Ecommerce-01.png" alt="">
        </cell>
      </group>
    </div>
    <footer-com></footer-com>
  </div>
</template>

<script>
import { XHeader, Group, Cell, CellBox,Tabbar,TabbarItem } from 'vux'
import FooterCom from '../components/footer'

export default {
  data() {
    return {
      msg: 'mine',
    }
  },
  components: {
    FooterCom,
    XHeader,
    Group,
    Cell,
    CellBox,
    Tabbar,
    TabbarItem
  }
}
</script>

<style lang="css">
.Mine{
  width: 100%;
  height: 100%;
}
.content{
  width: 100%;
  height: calc(100% - 99px);
  /* background-color: #ccc; */
}
.min-user{
  height: 140px;
  padding-top: 1px;
}
.min-user .aver{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 20px;
  background-color: #323;
}
.aver img{
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.min-nav{
  overflow: hidden;
  width: 100%;
  height: 70px;
}
.min-nav li{
  float: left;
  text-align: center;
  width: 25%;
  height: 100%;
  list-style-type: none;
}
.min-nav li img{
  width: 50%;
  height: auto;
}
.min-nav li span{
  font-size: 12px;
  display: block;
}
</style>
